<script setup lang="ts">
const { images } = defineProps(['images'])
console.log(images)

const slider = ref<HTMLDivElement>()
const inner = ref<HTMLDivElement>()
const btnPrev = ref<HTMLButtonElement>()
const btnNext = ref<HTMLButtonElement>()
const pageList = ref<HTMLDivElement>()
const currentIndex = ref(0)
const init = () => {
  // if (!inner.value) return
  // if (!inner.value.firstElementChild) return
  const cloneFirstNode: HTMLElement = <HTMLElement>inner.value!.firstElementChild!.cloneNode(true)
  const cloneLastNode: HTMLElement = <HTMLElement>inner.value!.lastElementChild!.cloneNode(true)
  cloneLastNode.style.marginLeft = '-100%'
  // 追加到第一个元素
  inner.value!.appendChild(cloneFirstNode)
  // 追加到最后一个元素
  inner.value!.insertBefore(cloneLastNode, inner.value!.firstElementChild)

  let timer = setInterval(pageNextClick, 3200)
  slider.value?.addEventListener('mouseover', () => {
    console.log('mouseover')
    clearInterval(timer)
  })
  slider.value?.addEventListener('mouseleave', () => {
    timer = setInterval(pageNextClick, 3200)
  })
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
      clearInterval(timer)
    }
    if (document.visibilityState === 'visible') {
      timer = setInterval(pageNextClick, 3200)
    }
  })
}
onMounted(() => {
  init()
})
const moveTO = (index: number) => {
  // 判断dom元素是否存在
  // if (!inner.value) return
  inner.value!.style.transform = `translateX(-${index}00%)`
  inner.value!.style.transition = '1.6s'
  currentIndex.value = index
}
const pagePrevClick = () => {
  if (currentIndex.value == 0) {
    inner.value!.style.transform = `translateX(-${images.length}00%)`
    inner.value!.style.transition = 'none'
    inner.value!.getBoundingClientRect()
    moveTO(images.length - 1)
  } else {
    moveTO(currentIndex.value - 1)
  }
}
const pageNextClick = () => {
  console.log('pagePrevClick')
  if (currentIndex.value == images.length - 1) {
    inner.value!.style.transform = 'translateX(100%)'
    inner.value!.style.transition = 'none'
    inner.value!.getBoundingClientRect()
    moveTO(0)
  } else {
    moveTO(currentIndex.value + 1)
  }
}
</script>

<template>
  <div ref="slider" class="slider">
    <div ref="inner" class="inner">
      <img v-for="(image, index) in images" :key="index" :alt="image.href" :src="image.href" />
    </div>
    <button ref="btnPrev" @click="pagePrevClick" class="btn-prev">&lt;</button>
    <button ref="btnNext" @click="pageNextClick" class="btn-next">&gt;</button>
    <div ref="pageList" class="page-list">
      <div v-for="index in images.keys()" @click="moveTO(index)" :key="index" :class="currentIndex == index ? 'page-item page-item-active' : 'page-item'"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.slider {
  width: 640px;
  min-width: 640px;
  background-color: pink;
  border-radius: 8px;
  height: 320px;
  position: relative;
  overflow-x: hidden;

  .inner {
    display: flex;
    position: relative;
    width: calc(640 * v-bind('images.length'));

    img {
      width: 100%;
      height: 100%;
      cursor: pointer;
      object-fit: fill;
    }
  }

  .btn-prev,
  .btn-next {
    position: absolute;
    cursor: pointer;

    $btnNPBox: 32px;

    width: $btnNPBox;
    height: $btnNPBox;
    border: none;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 4px;
    margin: 4px;
    background-color: rgb(162 162 162 / 40%);
    box-shadow: 0 0 4px rgb(255 255 255 / 80%);
    color: #fff;
  }

  .btn-prev:hover,
  .btn-next:hover {
    background-color: rgb(162 162 162 / 80%);
  }

  .btn-prev {
    left: 0;
  }

  .btn-next {
    right: 0;
  }

  .page-list {
    $pageItemBox: 8px;

    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;

    //top: 50%;
    left: 50%;
    bottom: 8px;
    transform: translate(-50%, 0);

    .page-item {
      margin: 0 2px;
      cursor: pointer;
      width: $pageItemBox;
      height: $pageItemBox;
      background-color: rgb(162 162 162 / 40%);
      box-shadow: 0 0 4px rgb(255 255 255 / 80%);
      border-radius: 50%;
    }

    .page-item-active {
      width: calc($pageItemBox + 4px);
      height: calc($pageItemBox + 4px);
      background-color: rgb(162 162 162 / 80%);
    }
  }
}
</style>
